<template>
  <div>
    <jxf-titletip :title="title" :hasRefresh="false" :hasGoBack="true" @goBack="goPrewBack"></jxf-titletip>
    <el-form :model="companySInfo" ref="companySInfo" class="company mt20" label-width="160px" :rules="rules">
      <el-form-item label="方案名称:" prop="planName" required>
        <el-input v-model="companySInfo.planName" ref="input-planName"></el-input>
      </el-form-item>
      <el-form-item label="初始公里:" prop="firstKm" required>
        <el-input v-model="companySInfo.firstKm" ref="input-firstKm">
          <template slot="append">公里</template>
        </el-input>
      </el-form-item>
      <el-form-item label="初始公里对应运费:" prop="firstKmPrice" required>
        <el-input v-model="companySInfo.firstKmPrice" ref="input-firstKmPrice">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="增加公里:" prop="leftKm" required>
        <el-input v-model="companySInfo.leftKm" ref="input-leftKm">
          <template slot="append">公里</template>
        </el-input>
      </el-form-item>
      <el-form-item label="增加运费:" prop="leftKmPrice" required>
        <el-input v-model="companySInfo.leftKmPrice" ref="input-leftKmPrice">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="saveFreigt">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "EditSetting",
    props: {
      dataInfo: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        title: "城市与运费管理",
        companySInfo: this.dataInfo,
        rules: {
          planName: [
            { required: true, message: '方案名称不能为空', trigger: ['change', 'blur'] },
          ],
          firstKm: [
            { required: true, message: '初始公里不能为空', trigger: ['change', 'blur'] },
            { validator: validate.max99, trigger: ['change', 'blur'] }
          ],
          leftKm: [
            { required: true, message: '增加公里不能为空', trigger: ['change', 'blur'] },
            { validator: validate.max99, trigger: ['change', 'blur'] }
          ],
          firstKmPrice: [
            { required: true, message: '初始公里对应运费不能为空', trigger: ['change', 'blur'] },
            { validator: validate.max99, trigger: ['change', 'blur'] }
          ],
          leftKmPrice: [
            { required: true, message: '增加运费不能为空', trigger: ['change', 'blur'] },
            { validator: validate.max99, trigger: ['change', 'blur'] }
          ]
        }
      }
    },
    methods: {
      saveFreigt() {
        let data = {
          ...this.companySInfo
        }
        this.$refs['companySInfo'].validate((valid) => {
          if (valid) {
            ajax.post(apis.setting.addFreight, data).then(res => {
              if(res.code == "10000000") {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.resetForm('companySInfo')
                this.$emit('fresh')
                this.$emit('goBack')
              } else {
                this.$message.error(res.message)
              }
            })
          }
        })
      },
      goPrewBack() {
        this.$emit('goBack')
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    },
    watch: {
      dataInfo() {
        this.companySInfo = this.dataInfo
      }
    },
    created() {

    }
  }
</script>

<style lang="scss" scoped>
  .company {
    width: 500px;
  }
</style>
